<template>
  <div class="haveSelectTree">
    <div
      class="header-title"
      :style="{height:headerTitle!=='' ? '20px' : '0px',lineHeight:headerTitle!=='' ? '20px' : '0px'}"
    >{{headerTitle}}</div>
    <div class="haveSelectTree-select">
      <Input
        v-model="value"
        icon="ios-search"
        search
        :placeholder="placeholder"
        style="width: 100%;"
        size="large"
        @on-click="onClick"
        v-if="showInput"
      />
    </div>
    <div
      class="tree-box"
      :style="{height: innerHeight==='' ? ('calc(' + '100% - ' + ( !headerTitle ? '57px' : '86px') + ')') : innerHeight,overflow:onScroll ? '': 'auto'}"
    >
      <slot>
        <Tree
          :ref="treeRef"
          :data="treeData"
          :render="renderContent"
          :show-checkbox="showCheckbox"
          @on-select-change="selectChange"
          @on-click-change="clickChange"
          @on-check-change="checkChang"
          @on-toggle-expand="toggle"
        ></Tree>
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "inputTree",
  props: {
    customerRender: {
      type: Boolean,
      default: true
    },
    // 设置tree的ref
    // _ref: {
    //   type: String,
    //   default: "my-tree"
    // },
    // 标题
    headerTitle: {
      type: String,
      default: ""
    },
    // input的placeholder
    placeholder: {
      type: String,
      default: ""
    },
    // input的value
    value: {
      type: String,
      default: ""
    },
    // 是否显示input搜索框
    showInput: {
      type: Boolean,
      default: true
    },
    // 是否显示checkbox
    showCheckbox: {
      type: Boolean,
      default: false
    },
    // tree data
    treeData: {
      type: Array,
      default() {
        return [];
      }
    },
    height: {
      type: String,
      default: "100%"
    },
    innerHeight: {
      type: String,
      default: ""
    },
    onScroll: {
      type: Boolean,
      default: false
    },
    renderContent: {
      type: Function,
      default: null
    },
    isHaveSelectChange: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      treeRef: "inputTree" + new Date().getTime()
    };
  },
  methods: {
    onClick() {
      this.$emit("on-click", this.value);
    },
    selectChange(val) {
      this.$emit("on-select-change", val);
    },
    clickChange(val) {
      this.$emit("on-click-change", val);
    },
    checkChang(val, currentVal) {
      this.$emit("on-check-change", val, currentVal);
    },
    toggle(val) {
      this.$emit("on-toggle-expand", val);
    },
    getCheckedNodes() {
      return this.$refs[this.treeRef].getCheckedNodes();
    },
    getSelectedNodes() {
      return this.$refs[this.treeRef].getSelectedNodes();
    },
    getCheckedAndIndeterminateNodes() {
      return this.$refs[this.treeRef].getCheckedAndIndeterminateNodes();
    }
  }
};
</script>
<style lang="scss" scoped>
.haveSelectTree /deep/ {
  @import "~@/styles/common/color.scss";
  $imgUrl: "~@/assets/img/";
  min-height: 100%;
  padding-top: 8px;
  background-color: $treeBg;
  .header-title {
    color: $titleColor;
  }

  .header-title {
    padding: 0 0.2rem;
    font-size: 0.16rem;
    height: 50px;
    line-height: 50px;
  }
  .haveSelectTree-select {
    /*padding: 0 1.3rem;*/
  }

  .tree-box {
    line-height: 30px;
    padding: 0 20px 20px;
    // overflow: auto;
    .ivu-tree-title {
      color: $treeText;
      &.ivu-tree-title-selected {
        color: $selectColor;
        background-color: transparent;
      }
      &:hover {
        color: $selectColor;
        background-color: transparent;
      }
    }
    .ivu-tree-arrow.ivu-tree-arrow-open {
      .ivu-icon-ios-arrow-forward {
        transform: rotate(180deg);
        &:before {
          content: url($imgUrl+"equip_icon_02.png");
        }
      }
    }
    .ivu-tree-arrow {
      margin-right: 7px;
      .ivu-icon-ios-arrow-forward {
        &:before {
          content: url($imgUrl+"equip_icon_01.png");
        }
      }
    }
  }
  .ivu-tree {
    height: calc(100% - 10px);
  }
  .ivu-tree-empty {
    height: 50%;
    text-indent: -1000000px;
    background: url("~@/assets/img/efficiencyAnalysis/zwsj.png") center/60%
      no-repeat;
  }
}
</style>
